{include file="public/_meta" /}
<body>
<div class="wrapper">

    {include file="public/_header" /}

    <!-- Sidebar -->
    {include file="public/_menu" /}
    <!-- End Sidebar -->

    <div class="main-panel">

        <div class="content">
            <div class="page-inner">

                <!-- 面包屑 -->
                {include file="public/_page_header" /}

                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <div class="d-flex align-items-center">
                                    <h4 class="card-title">菜单规则列表</h4>
                                    <button class="btn btn-primary btn-round ml-auto" data-toggle="modal" data-target="#addRowModal" onClick="add_item(0)">
                                        <i class="fa fa-plus"></i>
                                        添加
                                    </button>
                                </div>
                            </div>
                            <div class="card-body">
                                <!-- Modal -->
                                <div class="modal fade" id="addRowModal" tabindex="-1" role="dialog" aria-hidden="true">
                                    <div class="modal-dialog" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header no-bd">
                                                <h5 class="modal-title">
                                                    <span class="fw-mediumbold">添加</span>

                                                </h5>
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>
                                            <div class="modal-body">
                                                <form id="form-modal">
                                                    <div class="row">
                                                        <div class="form-group form-inline col-md-12">
                                                            <label for="ismenu" class="col-md-3 col-form-label"><font style="vertical-align: inherit;">菜单</font></label>
                                                            <label class="form-radio-label">
                                                                <input class="form-radio-input" type="radio" name="ismenu" id="ismenu" value="1" checked="">
                                                                <span class="form-radio-sign">是</span>
                                                            </label>
                                                            <label class="form-radio-label ml-3">
                                                                <input class="form-radio-input" type="radio" name="ismenu" id="ismenu" value="0">
                                                                <span class="form-radio-sign">否</span>
                                                            </label>
                                                        </div>

                                                        <div class="form-group form-inline col-md-12">
                                                            <label for="parent_id" class="col-md-3 col-form-label"><font style="vertical-align: inherit;">用户组</font></label>
                                                            <div class="col-md-8 p-0">
                                                                <select class="form-control input-full" id="parent_id" name="parent_id">
                                                                    <option value="0">顶级权限</option>
                                                                    {volist name="ruledata" id="vo"}
                                                                    <option value="{$vo.id}">{$vo.title}</option>
                                                                    {/volist}
                                                                </select>
                                                            </div>
                                                        </div>

                                                        <div class="form-group form-inline col-md-12">
                                                            <label for="name" class="col-md-3 col-form-label"><font style="vertical-align: inherit;">路由</font></label>
                                                            <div class="col-md-8 p-0">
                                                                <input type="text" class="form-control input-full" id="name" name="name" placeholder="路由">
                                                            </div>
                                                        </div>

                                                        <div class="form-group form-inline col-md-12">
                                                            <label for="title" class="col-md-3 col-form-label"><font style="vertical-align: inherit;">标题</font></label>
                                                            <div class="col-md-8 p-0">
                                                                <input type="text" class="form-control input-full" id="title" name="title" placeholder="标题">
                                                            </div>
                                                        </div>

                                                        <div class="form-group form-inline col-md-12">
                                                            <label for="icon" class="col-md-3 col-form-label"><font style="vertical-align: inherit;">图标</font></label>
                                                            <div class="col-md-8 p-0">
                                                                <input type="text" class="form-control input-full" id="icon" name="icon" placeholder="图标">
                                                            </div>
                                                        </div>

                                                        <div class="form-group form-inline col-md-12">
                                                            <label for="listorder" class="col-md-3 col-form-label"><font style="vertical-align: inherit;">权重</font></label>
                                                            <div class="col-md-8 p-0">
                                                                <input type="text" class="form-control input-full" id="listorder" name="listorder" placeholder="权重">
                                                            </div>
                                                        </div>

                                                        <div class="form-group form-inline col-md-12">
                                                            <label for="ismenu" class="col-md-3 col-form-label"><font style="vertical-align: inherit;">是否启用</font></label>
                                                            <label class="form-radio-label">
                                                                <input class="form-radio-input" type="radio" name="status" id="status" value="1" checked="">
                                                                <span class="form-radio-sign">是</span>
                                                            </label>
                                                            <label class="form-radio-label ml-3">
                                                                <input class="form-radio-input" type="radio" name="status" id="status" value="2">
                                                                <span class="form-radio-sign">否</span>
                                                            </label>
                                                        </div>

                                                    </div>
                                                    <div class="modal-footer no-bd">
                                                        <input type="hidden" name="id" value="">
                                                        <button type="submit" id="addRowButton" class="btn btn-primary">保存</button>
                                                        <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
                                                    </div>
                                                </form>
                                            </div>

                                        </div>
                                    </div>
                                </div>

                                <div class="table-responsive">
                                    <table id="add-row" class="display table table-striped table-hover" >
                                        <thead>
                                        <tr>
                                            <th>ID</th>
                                            <th>权重</th>
                                            <th>名称</th>
                                            <th>图标</th>
                                            <th>路由</th>
                                            <th>创建时间</th>
                                            <th>是否菜单</th>
                                            <th>是否启用</th>
                                            <th><a href="javascript:;" class="btn btn-success btn-xs btn-toggle2" data-toggle="tooltip" data-original-title="显示隐藏菜单" title=""><i class="fa fa-chevron-up"></i></a></th>
                                            <th style="width: 10%">操作</th>
                                        </tr>
                                        </thead>

                                        <tbody>

                                        {volist name="authRules" id="vo"}
                                        <tr>
                                            <td>{$vo.id}</td>
                                            <td class="text-c listorder"><input style="text-align:center;" size="3" attr-id="{$vo.id}" name="listorder" value="{$vo.listorder}"></td>
                                            <td>{$vo.title}</td>
                                            <td>{if $vo['icon']}<i class="{$vo['icon']}"></i>{/if}</td>
                                            <td>{$vo.name}</td>
                                            <td>{$vo.create_time}</td>
                                            <td>{$vo.ismenu|getStatus}</td>
                                            <td>{$vo.status|getStatus}</td>
                                            <td><a {gt name="vo.haschild" value="0"}data-toggle="tooltip" data-original-title="点击切换子菜单" title="" class="btn btn-xs btn-success btn-node-sub"{else/}class="btn btn-xs btn-default disabled btn-node-sub"{/gt} href='#' data-id="{$vo['id']}" data-pid="{$vo['parent_id']}"><i class="fa fa-sitemap" style="font-size: 12px;!important"></i></a></td>
                                            <td>
                                                <div class="form-button-action">


                                                    <button type="button" title="编辑" class="btn btn-link btn-primary btn-lg" data-toggle="modal" data-target="#addRowModal" onClick="edit_item('{$vo.id}')">
                                                        <i class="fa fa-edit"></i>
                                                    </button>

                                                    <button type="button" data-toggle="tooltip" onClick="admin_del(this,'{$vo.id}')" title="" class="btn btn-link btn-danger" data-original-title="删除">
                                                        <i class="fa fa-times"></i>
                                                    </button>

                                                </div>



                                            </td>
                                        </tr>
                                        {/volist}

                                        </tbody>
                                    </table>


                                </div>
                            </div>
                        </div>
                    </div>
                </div>


            </div>
        </div>

        {include file="public/_footer" /}


    </div>



</div>

{include file="public/_js" /}

</body>

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript">
    var SCOPE = {
        'listorder_url':"{:url('authRule/listorder')}",
        'del_url':"{:url('authRule/delete')}",
        'item_url':"{:url('authRule/edit')}",
        'add_url':"{:url('authRule/save')}"
    };


    $(function(){

        $(".btn-node-sub").off("click").on("click", function (e) {

            var status = $(this).data("shown") ? true : false;
            $("a.btn[data-pid='" + $(this).data("id") + "']").each(function () {
                $(this).closest("tr").toggle(!status);
            });
            $(this).data("shown", !status);
            return false;
        });
        $(document).on('click', "input[name='row[ismenu]']", function () {
            var name = $("input[name='row[name]']");
            name.prop("placeholder", $(this).val() == 1 ? name.data("placeholder-menu") : name.data("placeholder-node"));
        });

        //展开隐藏一级
        $(document.body).on("click", ".btn-toggle2", function (e) {
            $("a.btn[data-id][data-pid][data-pid!=0].disabled").closest("tr").hide();
            var that = this;
            var show = $("i", that).hasClass("fa-chevron-down");
            $("i", that).toggleClass("fa-chevron-down", !show);
            $("i", that).toggleClass("fa-chevron-up", show);
            $("a.btn[data-id][data-pid][data-pid!=0]").not('.disabled').closest("tr").toggle(show);
            $(".btn-node-sub[data-pid=0]").data("shown", show);
        });

        //展开隐藏全部
        $(document.body).on("click", ".btn-toggle2-all", function (e) {
            var that = this;
            var show = $("i", that).hasClass("fa-plus");
            $("i", that).toggleClass("fa-plus", !show);
            $("i", that).toggleClass("fa-minus", show);
            $(".btn-node-sub.disabled").closest("tr").toggle(show);
            $(".btn-node-sub").data("shown", show);
        });

        /*表单验证*/
        $("#form-modal").validate({
            rules:{
                name:{
                    required:true,
                },
                title:{
                    required:true,
                    minlength:2,
                    maxlength:11
                }
            },
            onkeyup:false,
            focusCleanup:true,
            success:"valid",
            submitHandler:function(form){
                var url = SCOPE.add_url;
                /*表单提交*/
                $(form).ajaxSubmit({
                    type: 'post',
                    url: url,
                    success: function(data){
                        if(data.code == 1001){
                            layer.msg(data.msg, {
                                icon: 1,
                                time: 2000
                            }, function(){
                                parent.location.reload();
                            });
                        }else{
                            layer.msg(data.msg,{icon:2,time:2000});
                        }
                    },
                    error: function(XmlHttpRequest, textStatus, errorThrown){
                        layer.msg(errorThrown,{icon:2,time:2000});
                    }
                });

            }
        });

    });

    function add_item(id) {
        $("input[name='id']").val(id);
        document.getElementById('form-modal').reset();
        $(".fw-mediumbold").text('添加');

    }

    function edit_item(id) {
        $.ajax({
            type: 'GET',
            url: SCOPE.item_url,
            dataType: 'json',
            data: {id:id},
            success: function(res){

                if(res.code == 1001){
                    $(".fw-mediumbold").text('编辑');
                    $("input[name='id']").val(res.data.id);
                    $("input[name='name']").val(res.data.name);
                    $("#listorder").val(res.data.listorder);
                    $("input[name='icon']").val(res.data.icon);
                    $("input[name='title']").val(res.data.title);
                    $("#parent_id").val(res.data.parent_id);
                    var sex = res.data.ismenu;
                    $(":radio[name='ismenu'][value='" + sex + "']").prop("checked", "checked");
                    $(":radio[name='status'][value='" + res.data.status + "']").prop("checked", "checked");
                }else{
                    layer.msg(res.msg,{icon:2,time:2000});
                }

            },
            error:function(res) {
                layer.msg('网络错误,稍后再试...',{icon:2,time:2000});
            }
        });
    }


    /*管理员-权限-删除*/
    function admin_del(obj,id){
        layer.confirm('确认要删除吗？',function(index){
            $.ajax({
                type: 'POST',
                url: SCOPE.del_url,
                dataType: 'json',
                data: {id:id},
                success: function(data){
                    if(data.code == 1001){
                        $(obj).parents("tr").remove();
                        layer.msg('删除权限规则成功!',{icon:1,time:2000});
                    }else{
                        layer.msg(data.msg,{icon:2,time:2000});
                    }
                },
                error:function(data) {
                    console.log(data.msg);
                },
            });
        });
    }

    /** 排序*/

    $(".listorder input").blur(function(){
        // 编写抛送的逻辑
        var id = $(this).attr('attr-id'); //获取主键id
        var listorder = $(this).val(); //获取排序的值
        var postData = {
            'id':id,
            'listorder':listorder
        };
        var url = SCOPE.listorder_url; //抛送地址
        $.post(url,postData,function(result){
            if(result.code == 1001){
                layer.msg('排序成功!', {icon: 1,time: 1000}, function(){
                    window.location.reload();
                });
            }else{
                layer.msg(result.msg,{icon:2,time:2000});
            }
        },"json");
    });

</script>
</html>




























